<template>
  <li
    class="fa-sign-select__item"
    :class="{
      'is-selected': selected,
      'is-disabled': disabled,
      'is-draggable': !disabled && draggable
    }"
    @click="!disabled && $emit('select', item)"
  >
    <SignImg
      :class="{ 'is-draggable': draggable }"
      :type="type"
      :data="item"
      :draggable="!disabled && draggable"
      @dragstart.native="$emit('drag', $event, item)"
    >
      <Tag class="fa-widget-tag" v-if="tag && tag.text" v-bind="tag" size="mini" />
    </SignImg>

    <div v-if="item.specs" class="sign-specs">({{ item.specs }})</div>

    <div class="sign-name">{{ item.name }}</div>
  </li>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SignData, SignType, TagProps } from '@/types'
import SignImg from '../sign-img/SignImg.vue'
import Tag from '../tag/Tag.vue'

export default defineComponent({
  name: 'FaSignSelectItem',

  components: { SignImg, Tag },

  props: {
    /** 印章、签名数据 */
    item: {
      type: Object as PropType<SignData>,
      required: true
    },

    /** 类型 */
    type: {
      type: String as PropType<SignType>,
      default: () => SignType.SEAL
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    },

    /** 是否允许拖拽 */
    draggable: {
      type: Boolean,
      default: false
    },

    /** 当前签章是否选中 */
    selected: {
      type: Boolean,
      default: false
    },

    /** 标签 */
    tag: {
      type: Object as PropType<TagProps>
    }
  },

  emits: {
    /** 选择 */
    select: (item: SignData) => void 0,

    /** 拖拽 */
    drag: (e: DragEvent, item: SignData) => void 0
  }
})
</script>

<style lang="scss">
.fa-sign-select__item {
  /** 尺寸 */
  $s: 140px;

  width: $s;
  margin: 0 auto 8px;

  &:last-child {
    margin-bottom: 0;
  }

  .fa-sign-img {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: $s;
    margin: 0 auto;
    border: 1px dashed $border-color;
    border-radius: 4px;
    cursor: pointer;

    .is-seal &__target {
      transform: scale(0.9);
    }

    .is-signature & {
      height: 80px;
    }
  }

  &:hover .fa-sign-img {
    border-color: $color-primary;
  }

  &.is-selected .fa-sign-img {
    border: 1px solid $color-primary;
  }

  &.is-draggable .fa-sign-img {
    cursor: move;
    cursor: grab;
  }

  &.is-disabled {
    .fa-sign-img {
      background-color: #f6f6f6;
      border: 1px dashed $border-color;
      cursor: not-allowed;
      opacity: 0.6;
    }

    .sign-name,
    .sign-specs {
      color: $color-text-disabled;
    }
  }

  .sign-specs,
  .sign-name {
    margin-top: 5px;
    text-align: center;
  }

  .sign-specs {
    color: $color-text-secondary;
  }

  .sign-name {
    color: $color-text-primary;
  }
}
</style>
